<template>
    <!-- 装主要部分的 div ，其高度，由其内容决定了 -->
    <div style="opacity: 0.83">


        <!-- 相当于欢迎页面 -->
        <el-row style="height: 90vh">
            <el-col :span="20" :offset="2" style="height: 100%;">
                <el-card shadow="hover" class="welcome">
                    <div id="container">
                        <a href="#">
                            Welcome To My Space
                        </a>
                    </div>
                    <h2 class="intro">{{intro}}</h2>
                </el-card>
                <!-- 小按钮，往下翻 -->
                <div class="bounce down" @click="startRead">
                    <i class="el-icon-arrow-down" style="color: white"></i>
                </div>
            </el-col>
        </el-row>

        <!-- 内容推荐版面 -->
        <el-col :span="20" :offset="2" id="index">
            <div style=";margin: 0 auto;">
                <el-row :gutter="12" style="background-color: whitesmoke;border-radius: 15px">
                    <!-- 左边大主体 -->
                    <el-col :sm="17" :xs="24">
                        <el-card style="background-color: whitesmoke;" class="left-item" id="rcmdDiv">
                            <!-- 卡片头部 -->
                            <div class="total" slot="header">
                                <!-- 卡片标题 -->
                                <div class="title">
                                    <i v-if=false class="el-icon-back"></i>
                                    <span>我的博客</span>
                                </div>
                                <!-- 统计内容数量 -->
                                <span>共 <span style="color: #001fff; font-size: 20px">{{totalcount}}</span> 篇</span>
                            </div>

                            <!-- 博客内容初步展示区 -- flex 布局-- 块跨行排列-->
                            <el-row type="flex" align="middle" style="flex-wrap: wrap" :gutter="20" v-for="blog in blogList"
                                        :key="blog.id"
                                        shadow="never" class="animate__animated animate__fadeInUp blog-content">


                                    <!-- 博客预览图 --大屏时占 1/3 -- 小屏时占 1 -->
                                    <el-col class="img" :xs="24" :sm="8">
                                        <div @click="getBlogInfo(blog.id)">
                                            <el-image :src="blog.firstPicture"></el-image>
                                        </div>
                                    </el-col>

                                    <!-- 博客内容预览 --大屏时占 2/3 -- 小屏时占 1 -->
                                    <el-col :xs="24" :sm="16">
                                        <!-- 整个预览内容的主体，都是可点击的 -->
                                        <div @click="getBlogInfo(blog.id)">
                                            <!-- 博客标题 -->
                                            <h3>{{blog.title}}</h3>
                                            <!-- 博客描述 -->
                                            <p class="description">{{blog.description}}</p>

                                            <!-- 博客的相关信息 -->
                                            <div class="blog-info">
                                                <!-- 所属用户信息 -->
                                                <div class="user-info">
                                                    <el-avatar size="small" :src="userMap.get(blog.userId.toString()).avatar"></el-avatar>
                                                    <a href="#" class="header">{{userMap.get(blog.userId.toString()).nickname}}</a>
                                                </div>
                                                <!-- 时间信息 -->
                                                <div class="blog-date">
                                                    <i class="el-icon-date"></i>
                                                    <span>{{blog.createTime | dataFormat}}</span>
                                                </div>
                                                <!-- 博客浏览量 -->
                                                <div>
                                                    <i class="el-icon-view"></i>
                                                    <span>{{blog.views}}</span>
                                                </div>
                                                <!-- 博客所属类别名字 -->
                                                <div class="blog-type">
                                                    <el-tag effect="plain">{{typeMap.get(blog.typeId.toString()).name}}</el-tag>
                                                </div>
                                            </div>

                                        </div>
                                    </el-col>
                                </el-row>

                        </el-card>

                        <!-- 底部页面跳转部分 -->
                        <el-pagination
                                :small="pagSmall"
                                background
                                @size-change="handleSizeChange"
                                :current-page="queryInfo.pageNum"
                                @current-change="handleCurrentChange"
                                :total="totalcount"
                                :page-size="queryInfo.pageSize"
                                :layout="pagLayout"
                                >
                        </el-pagination>
                    </el-col>

                    <!-- 右边侧栏 -->
                    <el-col :sm="7" :xs="24">

                        <!-- 第一张卡片：分类 -->
                        <el-card style="background-color: whitesmoke"
                                 class="animate__animated animate__fadeInUp right-item">

                            <!-- 卡片标题 -->
                            <div slot="header" class="attributes">
                                <b>分类</b>
                                <el-button v-if="selectMethod===1" type="primary"  size="small" style="float: right" @click="updateBlogList"> 取消选择 </el-button>
                            </div>

                            <!-- 卡片内容列表 -->
                            <ul>
                                <li class="animate__animated animate__fadeInUp blog-type" v-for="type in typeList"
                                    :key="type.id"
                                    @click="selectType(type.id)"
                                    :class="type.id === typeId? 'activeType':''">

                                    <!-- 一张图片 + 分类类名 -->
                                    <div style="display: flex;align-items: center">
                                        <el-image lazy :src="type.picUrl"
                                                  style="width: 28px;height: 28px; border-radius: 50%; margin-right: 10px"></el-image>
                                        {{type.name}}
                                    </div>

                                    <!-- 分类内容数量 -->
                                    <div>{{typeCountMap.get((type.id).toString())}}</div>
                                </li>
                            </ul>

                            <div class="more" @click="dealType">
                                <i v-if="moreType" class="el-icon-arrow-down"></i>
                                <i v-else class="el-icon-arrow-up"></i>
                            </div>
                        </el-card>

                        <!-- 第二章卡片：标签 -->
                        <el-card style="background-color: rgba(255,255,255,0.9)"
                                 class="animate__animated animate__fadeInUp right-item">
                            <!-- 卡片标题 -->
                            <div slot="header" class="attributes">
                                <b>标签</b>
                                <el-button v-if="selectMethod===2" type="primary"  size="small" style="float: right" @click="updateBlogList"> 取消选择 </el-button>
                            </div>

                            <!-- 摆放所有标签 -->
                            <div class="tags">
                                <div class="animate__animated animate__fadeInUp tag-item" v-for="tag in tagList"
                                     :key="tag.id"
                                     @click="selectTag(tag.id)"
                                     :class="tag.id === tagId? 'activeTag':''">
                                    <div class="sjx-outer">
                                        <div class="sjx-inner"></div>
                                    </div>
                                    <div class="tag">
                                        {{tag.name}}
                                        {{tagCountMap.get((tag.id).toString())}}
                                    </div>
                                </div>
                            </div>

                            <!-- 获取更多标签 -->
                            <div class="more" @click="dealTag">
                                <!-- 如果没点过，则显示向下箭头 -->
                                <i v-if="moreTag" class="el-icon-arrow-down"></i>
                                <!-- 点过了，就显示向上的箭头 -->
                                <i v-else class="el-icon-arrow-up"></i>
                            </div>
                        </el-card>

                        <!-- 第三章卡片：最新推荐 -->
                        <el-card style="background-color: rgba(255,255,255,0.9)"
                                 class="animate__animated animate__fadeInUp right-item">
                            <!-- 卡片标题 -->
                            <div slot="header" class="attributes">
                                <b>最新推荐</b>
                            </div>

                            <!-- 推荐内容列表 -->
                            <div class="animate__animated animate__fadeInUp recommend-blog l-text" v-for="blog in recommendList"
                                 :key="blog.id"
                                 @click="getBlogInfo(blog.id)">
                                <!-- 直接显示推荐博客的标题 -->
                                <a>{{blog.title}}</a>
                            </div>
                        </el-card>

                    </el-col>
                </el-row>
            </div>
        </el-col>
    </div>

</template>

<script>
    export default {
        name: "Index",
        data(){
            return{
                intro:'',//用于动态显示的 h2 文本,
                totalcount: 0,  //分页需要
                //搜索框需要
                queryInfo: {
                    query: '',
                    pageNum: 1,
                    pageSize: 4
                },
                //初始化信息
                blogList: [],
                typeList: [],
                tagList: [],
                recommendList: [],
                // 获得博客对应的用户对象
                userMap: new Map(),
                // 获取博客对应的 type 对象
                typeMap: new Map(),
                // 获取博客对应的 tag 对象
                tagMap: new Map(),
                // 获得分类对应的博客数量 map
                typeCountMap: new Map(),
                // 获得标签对应的博客数量 map
                tagCountMap: new Map(),

                //根据当前 selectMethod ，决定用哪个方法进行初始化数据，包括分页，
                // 0-全部  1-类型  2-标签
                selectMethod: 0,
                typeId: -1,
                tagId: -1,
                //展示更多类型和标签
                moreType: true,
                moreTag: true,
                //跳动文字
                timer: null,
                start: false,
                screenWidth: document.documentElement.clientWidth,  //实时屏幕宽度
            }
        },
        created() {
            window.addEventListener('resize', this.screenAdapter)
        },
        mounted() {
            /* 初始化数据获取 */
            this.getBlogList()
            this.getTypeList()
            this.getTagList()
            this.getRecommendList()

            /* h2 的动态输出 */
            let str = '在这里记录技术成长的点点滴滴...✍...';
            let idx = 0;
            let that = this;
            /* 嵌套调用，每执行 fn 一次，就输出一个字，一直循环不停 */
            let timer = setTimeout( function fn() {
                // console.log(this.intro)
                that.intro = that.intro+ str.substring(idx,idx+1)
                idx++
                if (idx>str.length){
                    that.intro = ''
                    idx = 0
                }
                setTimeout(fn,200);//单个字体输出快慢
            },1500);//页面刷新后，等待多久开始出现

            this.screenWidth =  document.documentElement.clientWidth
        },
        computed:{
            pagSmall(){
                return this.screenWidth <= 768;
            },
            // 计算分页栏样式
            pagLayout(){
                if (this.screenWidth<768){
                    return 'prev, pager, next'
                } else {
                    return 'total, prev, pager, next, jumper'
                }
            }
        },
        methods: {
            /* #################  数据初始化  ##################################################################*/

            // 获取博客列表
            async getBlogList() {
                let rcmdDiv = document.getElementById('rcmdDiv');
                let loadingInstance = this.$loading({ fullscreen: false, target:rcmdDiv, text:'加载中' });
                await this.$blog.get('/blogs',{
                        params:this.queryInfo
                    }
                ).then(res => {
                    let res2 = res.data.data
                    this.blogList = res2.pageContent.records

                    //userMap初始化
                    let obj = JSON.parse(JSON.stringify(res2.userMap))
                    for (let k of Object.keys(obj)){
                        this.userMap.set(k,obj[k])
                    }
                    //typeMap初始化
                    obj = JSON.parse(JSON.stringify(res2.typeMap))
                    for (let k of Object.keys(obj)){
                        this.typeMap.set(k,obj[k])
                    }
                    //总计
                    this.totalcount = res2.pageContent.total
                    loadingInstance.close()
                })
            },
            // 获取博客类型列表
            async getTypeList() {
                // 一定别忘了加外层括号！
                const res = (await this.$basic.get('type/types')).data.data
                this.typeList = res.typeList

                let obj = JSON.parse(JSON.stringify(res.typeCountMap))
                for (let k of Object.keys(obj)){
                    this.typeCountMap.set(k,obj[k])
                }
            },
            // 得到所有的分类
            async getFullTypeList() {
                // 一定别忘了加外层括号！
                const res = (await this.$basic.get('type/allTypes')).data.data
                this.typeList = res.typeList

                let obj = JSON.parse(JSON.stringify(res.typeCountMap))
                for (let k of Object.keys(obj)){
                    this.typeCountMap.set(k,obj[k])
                }
            },
            // 获取博客标签列表
            async getTagList() {
                // 一定别忘了加外层括号！
                const res = (await this.$basic.get('tag/tags')).data.data
                this.tagList = res.tagList

                let obj = JSON.parse(JSON.stringify(res.tagCountMap))
                for (let k of Object.keys(obj)){
                    this.tagCountMap.set(k,obj[k])
                }
            },
            // 得到所有的标签
            async getFullTagList() {
                const res = (await this.$basic.get('tag/allTags')).data.data
                this.tagList = res.tagList

                let obj = JSON.parse(JSON.stringify(res.tagCountMap))
                for (let k of Object.keys(obj)){
                    this.tagCountMap.set(k,obj[k])
                }
            },
            // 获取推荐博客列表
            async getRecommendList() {
                const {data:res} = await this.$blog.get('/recommend')
                this.recommendList = res.data
            },
            // 按分类,获取博客列表
            async selectType(id) {
                let lastId = this.typeId
                //如果此时选了新标签，则更新页数
                if(lastId !== id){
                    this.queryInfo.pageNum = 1;
                    this.queryInfo.pageSize = 4;
                }
                this.typeId = id
                //console.log(this.queryInfo)

                let rcmdDiv = document.getElementById('rcmdDiv');
                let loadingInstance = this.$loading({ fullscreen: false, target:rcmdDiv, text:'加载中' });
                const {data: res} = (await this.$blog.get('/selectType',{
                    params:{
                        "pageNum":this.queryInfo.pageNum,
                        "pageSize":this.queryInfo.pageSize,
                        "typeId":this.typeId
                    }
                })).data
                loadingInstance.close()

                this.blogList = res.pageContent.records
                this.totalcount = res.pageContent.total

                //userMap重新赋值
                this.userMap.clear()
                let obj = JSON.parse(JSON.stringify(res.userMap))
                for (let k of Object.keys(obj)){
                    this.userMap.set(k,obj[k])
                }
                //typeMap 重新赋值
                this.typeMap.clear();
                // 别忘了 toString
                this.typeMap.set((id).toString(),res.selectType)
                this.selectMethod = 1
            },
            // 按标签筛选博客
            async selectTag(id) {
                //console.log(this.typeMap)
                let lastId = this.tagId
                //如果此时选了新标签，则更新页数
                if(lastId !== id){
                    this.queryInfo.pageNum = 1;
                    this.queryInfo.pageSize = 4;
                }

                let rcmdDiv = document.getElementById('rcmdDiv');
                let loadingInstance = this.$loading({ fullscreen: false, target:rcmdDiv, text:'加载中' });
                this.tagId = id
                const {data: res} = (await this.$blog.get('/selectTag',{
                    params:{
                        "pageNum":this.queryInfo.pageNum,
                        "pageSize":this.queryInfo.pageSize,
                        "tagId":this.tagId
                    }
                })).data
                loadingInstance.close()
                //console.log(res)
                this.blogList = res.blogs
                //console.log(this.blogList)
                this.totalcount = res.pageContent.total

                //userMap重新赋值
                this.userMap.clear()
                let obj = JSON.parse(JSON.stringify(res.userMap))
                for (let k of Object.keys(obj)){
                    this.userMap.set(k,obj[k])
                }
                //typeMap重新赋值
                this.typeMap.clear()
                obj = JSON.parse(JSON.stringify(res.typeMap))
                for (let k of Object.keys(obj)){
                    this.typeMap.set(k,obj[k])
                }

                //tagMap 重新赋值
                this.tagMap.clear();
                // 别忘了 toString
                this.tagMap.set((id).toString(),res.selectTag)
                this.selectMethod = 2
                //console.log('标签选择成功！')
            },
            // 更新博客列表, 获取全部博客数据
            updateBlogList() {
                this.selectMethod = 0
                this.typeId = -1
                this.tagId = -1
                this.getBlogList()
            },

            /* #################  数据扩展  ##################################################################*/
            // 点击展开更多分类
            async dealType() {
                if (this.moreType) {
                    await this.getFullTypeList()
                } else {
                    await this.getTypeList()
                }
                this.moreType = !this.moreType
            },
            // 点击展开更多标签
            async dealTag() {
                if (this.moreTag) {
                    await this.getFullTagList()
                } else {
                    await this.getTagList()
                }
                this.moreTag = !this.moreTag
            },

            // 跳转到博客详情页
            getBlogInfo(blogId) {
                // console.log(blogId.id)
                this.$router.push({path: '/blogInfo', query: {id: blogId}});
            },

            /* #################  跳转按钮需要  ##################################################################*/
            // 点击，页面滑动至内容推荐页
            startRead() {
                this.$nextTick(() => {
                    document.getElementById('index').scrollIntoView({
                        behavior: 'smooth',
                        block: 'start',
                        // inline: 'nearest'
                    });
                })
            },
            // 修改当前页码
            handleCurrentChange(num) {
                /* @current-change 属性，会自动传参数：当前页数 */
                this.queryInfo.pageNum = num
                if(this.selectMethod===0){
                    this.getBlogList()
                }else if(this.selectMethod===1){
                    this.selectType(this.typeId)
                }else{
                    this.selectTag(this.tagId)
                }
            },
            // 修改当前页大小
            handleSizeChange(newSize) {
                this.queryInfo.pageSize = newSize
            },
            // 屏幕尺寸变化的监听函数
            screenAdapter() {
                this.screenWidth = document.documentElement.clientWidth;
            }
        },
    }
</script>

<style scoped lang="less">
    /***********************************  字体大标题 *******************************************/
    @import url('https://fonts.googleapis.com/css2?family=Iceland&display=swap');
    #container {
        padding: 2rem;
        padding-top: 50px;
        display: flex;
        flex-direction: column;
        gap: 4rem;

        /*Neon*/
        a {
            text-align: center;
            font-size: 7em;
            margin-bottom: 0;
            margin-top: 0;
            line-height: 1;
            text-decoration: none;
            color: #fff;
            font-family: Iceland;
            animation: neon 1.5s ease-in-out infinite alternate;
        }


        /*glow*/
        @keyframes neon {
            from {
                text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228dff,
                0 0 70px #228dff, 0 0 80px #228dff, 0 0 100px #228dff, 0 0 150px #228dff;
            }
            to {
                text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228dff,
                0 0 35px #228dff, 0 0 40px #228dff, 0 0 50px #228dff, 0 0 75px #228dff;
            }
        }

        /*Make stuff responsive*/

        @media (max-width: 650px) {
            a,p {
                font-size: 3.5em;
            }
        }

    }

    /*********************************************************************************************/

    .attributes{
        text-align: center;
    }

    .welcome{
        background-color: rgba(0, 0, 0, 0.1);   /* 可以取消掉全局定义的背景颜色！ */
        border: none;
        height: 90%;    /* 留 10% 放一个按钮 */
        position: relative;

        .tit {
            box-sizing: border-box;
            position: relative;
            width: 80%;
            height: 200px;  /* h1的边框的高度 */
            line-height: 100px;
            /* 阴影往内打 -  */
            box-shadow: 1px 10px 50px 5px white;
            margin: 40px auto;
            margin-top: 80px;
            color: white;
            text-align: center;
            font-size: 50px;
            font-weight: normal;
            letter-spacing: 10px;
        }

        .border {
            width: 100%;
            height: 200px;
            position: absolute;
            top: -6px;
            left: -6px;
            border: 3px solid white;
            box-sizing: border-box;
            animation: clipMe 5s linear infinite;
        }

        .intro {
            letter-spacing: 5px;
            line-height: 50px;
            width: 80%;
            margin: 0 auto;
            margin-top: 100px;
            text-align: center;
            font-weight: normal;
            color: white;
        }
    }

    .down {
        /* 大小，边框，颜色 */
        width: 35px;
        height: 35px;
        border-radius: 50%;
        border: 2px solid #fff;
        /* 动作 */
        animation: bounce 2s infinite;
        animation-duration: 3s;
        font-size: 25px;    /* 箭头大小 */
        position: absolute;
        bottom: 10px;    /* 距离本 div 底部位置 */
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .down:hover {
        animation: none;
        cursor: pointer;
        box-shadow: 0 0 20px 0 white;
        transition: all .2s;
    }

    @keyframes clipMe {
        0%{
            clip: rect(0px,0px,6px,0px,);
        }

        25% {
            clip: rect(6px, 6px, 200px, 0px);
        }

        50% {
            clip: rect(200px, 850px, 200px, 0px);
        }

        75% {
            clip: rect(0px, 850px, 200px, 850px);
        }

        100% {
            clip: rect(0px, 850px, 6px, 0px);
        }
    }

    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
            transform: translate(-50%, 0);
        }
        40% {
            transform: translate(-50%, -10px);
        }
        60% {
            transform: translate(-50%, -10px);
        }
    }

    ul {
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 0;
        border-radius: 5px;
    }

    .el-pagination {
        padding-bottom: 20px;
    }

    .el-card /deep/ .el-card__body {
        padding: 0;
    }

    .right-item {
        margin-bottom: 20px;

        li:first-child {
            border-top: 1px solid rgba(179, 216, 255, 0.5);
        }

        li {
            border-bottom: 1px solid rgba(179, 216, 255, 0.5);
        }

        .more {
            text-align: center;
            color: #3a8ee6;
            padding: 8px;
        }

        .more:hover {
            cursor: pointer;
            color: #3a8ee6;
        }

        .blog-type:hover, .activeType {
            background-color: rgba(58, 142, 230, 0.3);
            cursor: pointer;
        }

        .tags {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin: 15px 13px 0;
            border-bottom: 1px solid rgba(179, 216, 255, 0.5);

        }

        .tag-item {
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-left: 5px;
            margin-right: 5px;
            margin-bottom: 10px;
            box-sizing: border-box;
            .tag {
                background-color: #ecf5ff;
                box-sizing: border-box;
                display: inline-block;
                height: 22px;
                padding: 0 10px;
                line-height: 22px;
                font-size: 10px;
                color: #409eff;
                border-radius: 4px;
                white-space: nowrap;
                border: 1px solid #409eff;
                transition: .2s;
            }

            .sjx-outer {
                width: 0;
                height: 0;
                border-top: 6px solid transparent;
                border-bottom: 6px solid transparent;
                border-right: 6px solid #409eff;
                position: relative;
                transition: .2s;
            }

            .sjx-inner {
                border-top: 6px solid transparent;
                border-bottom: 6px solid transparent;
                border-right: 6px solid #ecf5ff;
                top: -6px;
                left: 1px;
                position: absolute;
                transition: .2s;
            }
        }



        .tag-item:hover, .activeTag {
            box-sizing: border-box;
            .tag {
                color: white;
                background-color: #409eff;
                cursor: pointer;
            }

            .sjx-inner {
                border-right: 6px solid #409eff;
            }
        }

    }

    .blog-type {
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 40px;
    }

    .recommend-blog {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        padding-left: 20px;
        padding-right: 20px;

        a {
            border-bottom: 1px solid rgba(34, 36, 38, .15);
            line-height: 40px;
            display: block;
            text-decoration: none;
            color: black;
        }

        a:hover {
            color: #3a8ee6;
        }
    }

    & /deep/ .el-card__header{
        background-color: #d2dce6;
        padding:10px 5px 10px 5px ;
    }

    .total {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: larger;
        font-weight: bold;

        .title {
            display: flex;
            align-items: center;

            .el-icon-back {
                font-weight: bolder;
                color: #3a8ee6;
                margin-right: 10px;
            }

            .el-icon-back:hover {
                cursor: pointer;
            }
        }
    }

    /* 鼠标移动到这个元素上，发生变化 */
    .blog-content:hover {
        /*border-left: 5px solid #3a8ee6;*/
        /*border-right: 5px solid #3a8ee6;*/
        background-color: rgba(58, 142, 230, 0.3);
        cursor: pointer;

        /* 标签发生变化 */
        .el-tag {
            color: white;
            background-color: #3a8ee6;
        }
    }

    .blog-content {
        padding: 10px;
        height: auto;
        border-bottom: 1px solid rgb(199, 163, 92);
        /*border-bottom: 1px solid rgba(34, 36, 38, .15);*/
        transition: .3s;


        .el-image {
            border-radius: 5px;
            box-sizing: border-box;
            flex-shrink: 0;
        }

        .blog-info {
            display: flex;
            align-items: center;
            color: rgba(0, 0, 0, .4);
            font-size: 10px;

            .user-info {
                display: flex;
                justify-content: space-around;
                align-items: center;
                margin-right: 15px;

                .el-avatar {
                    margin-right: 5px;
                    width: 22px;
                    height: 22px;
                }

                .header {
                    text-decoration: none;
                    color: #3a8ee6;
                    font-weight: bold;
                }
            }

            .blog-date {
                margin-right: 15px;
            }

            .blog-type {
                margin-left: auto;
            }
        }
    }

    .description {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        font: 300 1em/1.8 PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
    }



    @media screen and (max-width: 768px) {
        .blog-date {
            display: none;
        }

        .welcome {
            width: 100%;

            .border {
                display: none;
            }

            .tit {
                font-size: 2rem;
                width: 100%;
                line-height: 50px;
                letter-spacing: 2px;
                height: auto;
            }

            .intro {
                font-size: 1rem;
                line-height: 30px;
            }
        }

        .el-pagination {
            width: 100%;
        }
    }

</style>
